<template>
  <div class="container">
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
    >
      <el-menu-item index="1">全部</el-menu-item>
      <el-menu-item index="2">我的报修</el-menu-item>
      <el-menu-item index="3">我的审批</el-menu-item>
    </el-menu>

    <div v-if="displayHide[0]">
      <div class="header-actions">
        <div class="button-group">
          <el-button type="success" @click="cnm">新增1</el-button>
          <el-button type="success">编辑</el-button>
          <el-button type="success">删除</el-button>
          <el-button type="success">派工</el-button>
          <el-button type="success">导出</el-button>
        </div>
        <el-input
          placeholder="请输入内容"
          prefix-icon="el-icon-search"
          v-model="input2"
          class="search-input"
        ></el-input>
      </div>

      <el-table :data="tableData" border style="width: 100%">
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small"
              >查看</el-button
            >
          </template>
        </el-table-column>
        <el-table-column fixed prop="date" label="日期" width="150">
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="120">
        </el-table-column>
        <el-table-column prop="province" label="省份" width="120">
        </el-table-column>
        <el-table-column prop="city" label="市区" width="120">
        </el-table-column>
        <el-table-column prop="address" label="地址" width="300">
        </el-table-column>
        <el-table-column prop="zip" label="邮编" width="120"> </el-table-column>
      </el-table>

      <div class="block">
        <el-pagination
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
          :current-page="currentPage4"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400"
        >
        </el-pagination>
      </div>
    </div>

    <div v-if="displayHide[1]">
      <div class="header-actions">
        <div class="button-group">
          <el-button type="success">新增2</el-button>
          <el-button type="success">删除</el-button>
          <el-button type="success">派工</el-button>
          <el-button type="success">导出</el-button>
        </div>
        <el-input
          placeholder="请输入内容"
          prefix-icon="el-icon-search"
          v-model="input2"
          class="search-input"
        ></el-input>
      </div>

      <el-table :data="tableData" border style="width: 100%">
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small"
              >查看</el-button
            >
          </template>
        </el-table-column>
        <el-table-column fixed prop="date" label="日期" width="150">
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="120">
        </el-table-column>
        <el-table-column prop="province" label="省份" width="120">
        </el-table-column>
        <el-table-column prop="city" label="市区" width="120">
        </el-table-column>
        <el-table-column prop="address" label="地址" width="300">
        </el-table-column>
        <el-table-column prop="zip" label="邮编" width="120"> </el-table-column>
      </el-table>

      <div class="block">
        <el-pagination
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
          :current-page="currentPage4"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400"
        >
        </el-pagination>
      </div>
    </div>

    <div v-if="displayHide[2]">
      <div class="header-actions">
        <div class="button-group">
          <el-button type="success" @click="getee">新增3</el-button>
          <el-button type="success">派工</el-button>
          <el-button type="success">导出</el-button>
        </div>
        <el-input
          placeholder="请输入内容"
          prefix-icon="el-icon-search"
          v-model="input2"
          class="search-input"
        ></el-input>
      </div>

      <el-table
        :data="tableData"
        border
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <!-- <el-table-column type="index" :index="indexMethod" label="序号" width="60">
        </el-table-column> -->
        <el-table-column type="index" :index="indexMethod" label="序号" width="60"> </el-table-column>
        <el-table-column prop="date" label="日期" width="150">
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="120">
        </el-table-column>
        <el-table-column prop="province" label="省份" width="120">
        </el-table-column>
        <el-table-column prop="city" label="市区" width="120">
        </el-table-column>
        <el-table-column prop="address" label="地址" width="300">
        </el-table-column>
        <el-table-column prop="zip" label="邮编" width="120"> </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
          :current-page="currentPage4"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>  

<script>
import {test} from  '../../../api/test/test'

export default {
  data() {
    return {
      activeIndex: "1",
      input2: "", // 添加输入框的绑定
      displayHide: [true, false, false],
      currentPage4: 1,
      pageSize: 10, // 每页显示条目数
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1517 弄",
          zip: 200333,
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1519 弄",
          zip: 200333,
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1516 弄",
          zip: 200333,
        },
      ],
    };
  },
  methods: {
    cnm(){
      this.$router.push({ path: '/ffxz' });
    },
    indexMethod(index) {
      // 计算分页后的序号
      return (this.currentPage4 - 1) * this.pageSize + index + 1;
    },
    handleSelectionChange(val) {
      console.log('选中的行:', val);
    },
    handleCurrentChange(val) {
      this.currentPage4 = val;
      // 这里可以添加获取新页数据的代码
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage4 = 1; // 重置为第一页
      // 这里可以添加获取新页数据的代码
    },
    toggleDiv(index) {
      this.displayHide = this.displayHide.map((value, i) => {
        if (i === index - 1) {
          return !value; // 切换当前索引的值
        }
        return false; // 其他索引设置为 false
      });
    },
    handleSelect(index) {
      this.toggleDiv(index);
      console.log(this.displayHide);
    },
    getee() {
      let data ='device_frr';
      test(data).then((res) => {
        console.log(res);
          if (res.data.status == 1) {
            console.log(res.data);
          } else {
            this.$message(res.data.msg);
          }
        })
        .catch((error) => {});
    },
  },
  computed: {
    // 使用计算属性来确保只有一个值为 true
    displayHideComputed: {
      get() {
        return this.displayHide;
      },
      set(newValue) {
        // 当尝试设置新的 displayHide 值时
        const index = newValue.indexOf(true);
        if (index !== -1) {
          this.displayHide.fill(false);
          this.displayHide[index] = true;
        }
      },
    },
  },
};
</script>  

<style>
.container {
  max-width: 1200px; /* Adjust the max-width as needed */
  margin: 0 auto; /* Center the container */
  padding: 20px; /* Optional padding */
}

.header-actions {
  display: flex;
  justify-content: space-between; /* 将两个部分分别对齐到两侧 */
  align-items: center; /* 垂直居中对齐 */
  margin-top: 30px; /* 增加顶部间距 */
  margin-bottom: 20px; /* Space between header and table */
}
.button-group {
  display: flex;
  gap: 10px; /* 按钮之间的间距 */
}
.search-input {
  width: 200px; /* 输入框宽度 */
}
</style>